<template>
  <div class="min-h-screen bg-white dark:bg-gray-900" :style="backgroundStyle">
    <!-- Contact Hero Section -->
    <section class="py-20 bg-gradient-to-br from-blue-50 to-white dark:from-gray-900 dark:to-gray-900 shadow-md">
      <div class="container mx-auto px-4">
        <div v-if="loading" class="text-center">
          <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600 mx-auto"></div>
        </div>
        <div v-else-if="error" class="text-red-500 text-center">
          {{ error }}
          <button @click="refresh" class="ml-2 text-blue-600 hover:text-blue-700">重试</button>
        </div>
        <div v-else class="max-w-4xl mx-auto text-center">
          <h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800 dark:text-gray-100">
            联系我们
          </h1>
          <p class="text-xl text-gray-700 dark:text-gray-100 mb-8">
            随时与我们取得联系，我们将为您提供专业的服务
          </p>
        </div>
      </div>
    </section>

    <!-- Contact Form Section -->
    <section class="py-16 bg-white dark:bg-gray-800 shadow-md">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Contact Information -->
            <div class="bg-blue-50 dark:bg-gray-700 p-8 rounded-lg shadow-lg border-2 border-blue-100 dark:border-gray-600">
              <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">
                联系方式
              </h2>
              <div class="space-y-4">
                <div v-for="(item, index) in contactInfo" :key="index"
                  class="flex items-start space-x-4 p-4 rounded-lg bg-white/90 dark:bg-gray-600/50 hover:bg-white dark:hover:bg-gray-600 transition-colors duration-200 border border-blue-100 dark:border-gray-500">
                  <div class="flex-shrink-0">
                    <component :is="item.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">
                      {{ item.title }}
                    </h3>
                    <p class="text-gray-700 dark:text-gray-200">
                      {{ item.content }}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Contact Form -->
            <div class="bg-gradient-to-br from-blue-50 to-white dark:from-gray-700 dark:to-gray-700 p-8 rounded-lg shadow-lg border-2 border-blue-100 dark:border-gray-600">
              <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">
                发送消息
              </h2>
              <form @submit.prevent="handleSubmit" class="space-y-8">
                <div class="relative pt-2">
                  <input
                    v-model="form.name"
                    type="text"
                    required
                    class="peer w-full h-10 px-0 border-0 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent text-gray-800 dark:text-white placeholder-transparent focus:ring-0 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 autofill:bg-transparent"
                    placeholder="姓名"
                  />
                  <label class="absolute left-0 top-0 text-base font-medium text-gray-700 dark:text-gray-300 peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:top-0 peer-focus:text-gray-800 dark:peer-focus:text-gray-100 peer-focus:font-semibold transition-all duration-300">
                    姓名
                  </label>
                </div>

                <div class="relative pt-2">
                  <input
                    v-model="form.email"
                    type="email"
                    required
                    class="peer w-full h-10 px-0 border-0 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent text-gray-800 dark:text-white placeholder-transparent focus:ring-0 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 autofill:bg-transparent"
                    placeholder="邮箱"
                  />
                  <label class="absolute left-0 top-0 text-base font-medium text-gray-700 dark:text-gray-300 peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:top-0 peer-focus:text-gray-800 dark:peer-focus:text-gray-100 peer-focus:font-semibold transition-all duration-300">
                    邮箱
                  </label>
                </div>

                <div class="relative pt-2">
                  <input
                    v-model="form.subject"
                    type="text"
                    required
                    class="peer w-full h-10 px-0 border-0 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent text-gray-800 dark:text-white placeholder-transparent focus:ring-0 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 autofill:bg-transparent"
                    placeholder="主题"
                  />
                  <label class="absolute left-0 top-0 text-base font-medium text-gray-700 dark:text-gray-300 peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:top-0 peer-focus:text-gray-800 dark:peer-focus:text-gray-100 peer-focus:font-semibold transition-all duration-300">
                    主题
                  </label>
                </div>

                <div class="relative pt-2">
                  <textarea
                    v-model="form.message"
                    rows="4"
                    required
                    class="peer w-full px-0 border-0 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent text-gray-800 dark:text-white placeholder-transparent focus:ring-0 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 resize-none autofill:bg-transparent"
                    placeholder="消息内容"
                  ></textarea>
                  <label class="absolute left-0 top-0 text-base font-medium text-gray-700 dark:text-gray-300 peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:top-0 peer-focus:text-gray-800 dark:peer-focus:text-gray-100 peer-focus:font-semibold transition-all duration-300">
                    消息内容
                  </label>
                </div>

                <button
                  type="submit"
                  :disabled="submitting"
                  class="w-full mt-8 px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 relative overflow-hidden group dark:bg-blue-500 dark:hover:bg-blue-600"
                >
                  <span class="relative z-10">{{ submitting ? '提交中...' : '发送消息' }}</span>
                  <div class="absolute inset-0 bg-blue-700 dark:bg-blue-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></div>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Map Section -->
    <section class="py-16 bg-blue-50 dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border-2 border-blue-100 dark:border-gray-700">
            <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">
              公司地址
            </h2>
            <!-- Map container with shadow and border -->
            <div class="w-full h-96 rounded-lg shadow-inner border-2 border-blue-100 dark:border-gray-600 overflow-hidden hover:shadow-lg transition-shadow duration-300">
              <StaticMap :address="contactInfo[0].content" />
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { usePageData, useMetaData, usePageBackground } from '../composables'
import { pageData } from '../composables/data/pageData'
import StaticMap from '../components/StaticMap.vue'

const { loading, error, data, refresh } = usePageData('contact')
const { backgroundStyle } = usePageBackground('contact')

// 设置页面元数据
useMetaData('联系我们', '与我们取得联系，获取专业服务')

// 联系信息
const contactInfo = ref([
  {
    icon: 'IconLocation',
    title: '地址',
    content: pageData.common.contact.address
  },
  {
    icon: 'IconPhone',
    title: '电话',
    content: pageData.common.contact.phone
  },
  {
    icon: 'IconEmail',
    title: '邮箱',
    content: pageData.common.contact.email
  },
  {
    icon: 'IconClock',
    title: '工作时间',
    content: pageData.common.contact.workTime
  }
])

// 表单数据
const form = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})

const submitting = ref(false)

// 表单提交
const handleSubmit = async () => {
  submitting.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    alert('消息已发送！我们会尽快与您联系。')
    // 重置表单
    form.value = {
      name: '',
      email: '',
      subject: '',
      message: ''
    }
  } catch (err) {
    alert('发送失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

// 图标组件
const IconLocation = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
    </svg>
  `
}

const IconPhone = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
    </svg>
  `
}

const IconEmail = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
    </svg>
  `
}

const IconClock = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  `
}
</script>

<style scoped>
/* 输入框动画效果 */
.peer:focus ~ label,
.peer:not(:placeholder-shown) ~ label {
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-1.2rem);
}

.peer:focus,
.peer:not(:placeholder-shown) {
  border-color: var(--blue-500);
}

.dark .peer:focus,
.dark .peer:not(:placeholder-shown) {
  border-color: var(--blue-400);
}

/* 移除默认聚焦边框 */
.peer {
  transition: all 0.3s ease;
  outline: none !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 标签动画 */
label {
  transform-origin: left top;
  user-select: none;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* 移除输入框自动填充的背景色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(17 24 39) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgb(249 250 251 / 0.5) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  caret-color: rgb(17 24 39) !important;
}

/* 暗色主题下的自动填充样式 */
:root[class~="dark"] input:-webkit-autofill,
:root[class~="dark"] input:-webkit-autofill:hover,
:root[class~="dark"] input:-webkit-autofill:focus,
:root[class~="dark"] textarea:-webkit-autofill,
:root[class~="dark"] textarea:-webkit-autofill:hover,
:root[class~="dark"] textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(243 244 246) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgb(17 24 39 / 0.05) inset !important;
  caret-color: rgb(243 244 246) !important;
}

/* 自动填充时的渐变效果 */
input:-webkit-autofill,
textarea:-webkit-autofill {
  transition: all 0.3s ease-in-out;
}

/* 输入框hover状态 */
.peer:hover {
  background-color: rgb(249 250 251 / 0.1);
}

:root[class~="dark"] .peer:hover {
  background-color: rgb(243 244 246 / 0.05);
}

/* 输入框focus状态 */
.peer:focus {
  background-color: rgb(249 250 251 / 0.15);
}

:root[class~="dark"] .peer:focus {
  background-color: rgb(243 244 246 / 0.1);
}
</style>
